<template>
	<view class="member">
		<view class="userInfo" @click="login()">
			<view>
				<image src="../../static/logo.png"></image>
				<view class="tit">
					{{username === ''?'用户':username}}
				</view>
			</view>
			<view class="about">
				>
			</view>
		</view>
		<view class="accountInfo">
			<view class="balance">
				<view class="myBalance">
					我的余额
				</view>
				<view>
					查看交易明细>
				</view>
			</view>
			<view class="detail">
				<view>
					<view class="iconfont icon-guanyuwomen">

					</view>
					<view>
						0.0元
					</view>
				</view>
				<view>
					<view class="iconfont icon-guanyuwomen">

					</view>
					<view>
						充值中心
					</view>
				</view>
			</view>
		</view>
		<view class="goodsInfo">
			<view class="goods">
				<view class="orderMy">
					我的订单
				</view>
				<view>
					查看全部订单>
				</view>
			</view>
			<view class="detail">
				<view>
					<view class="iconfont icon-guanyuwomen">

					</view>
					<view>
						待付款
					</view>
				</view>
				<view>
					<view class="iconfont icon-guanyuwomen">

					</view>
					<view>
						待发货
					</view>
				</view>
				<view>
					<view class="iconfont icon-guanyuwomen">

					</view>
					<view>
						待收货
					</view>
				</view>
			</view>
		</view>
		<view class="functions">
			fasfa
		</view>
	</view>
</template>

<script>
	export default {
		name: "member",
		data() {
			return {
				username:''
			}
		},
		methods: {
			login() {
				//判断缓存中是否有用户数据（也就是判断有没有登录）
				if (!uni.getStorageSync('encryptedData')) {
					uni.getUserProfile({
						desc: '获取您的昵称、头像、地区及性別', //向用户展示的信息
						//用户点击了登录
						success: infoRes => {
							console.log(infoRes,infoRes.userInfo.nickName)
							
							this.username = infoRes.userInfo.nickName;
							if (infoRes.errMsg === 'getUserProfile:ok') {
								//开始登录
								const appid = uni.getAccountInfoSync().miniProgram.appId
								uni.login({
									provider: 'weixin',
									success: function(loginRes) {
										const code = loginRes.code
										uni.request({
											url: 'https://api.weixin.qq.com/sns/jscode2session',
											method: 'GET',
											data: {
												appid: appid,
												secret: '6071ee5392b0af7d74ea3b15c89e39bf', //微信公众平台小程序获取
												js_code: code,
												grant_type: 'authorization_code'
											},
											success: res => {
												console.log(res) //根据你的需要存用户信息，可以存到cookie也可以写个请求存到你服务器的数据库里面
												uni.setStorageSync('encryptedData',
													infoRes.encryptedData);
												uni.setStorageSync('iv', infoRes.iv);
												uni.setStorageSync('rawData', infoRes
													.rawData);
												uni.setStorageSync('signature', infoRes
													.signature);
												uni.setStorageSync('securityStatus',
												1);
												uni.showToast({
													title: '登陆成功',
													duration: 2000
												});
											},
											fail: err => {
												uni.showToast({
													title: '网络错误登陆失败',
													icon: 'none',
													duration: 2000
												});
											}
										})
									}
								});
							} else {
								uni.showToast({
									title: '授权失败',
									icon: 'none',
									duration: 2000
								});
							}
						},
						fail: err => {
							uni.showToast({
								title: '授权失败',
								icon: 'none',
								duration: 2000
							});
						}
					});
				} else {
					console.log('登陆过了')
				}
			}
		}
	}
</script>

<style lang="less">
	.member {
		background-color: #C0C0C0;

		.userInfo {
			height: 150rpx;
			background-color: #FFFFFF;
			padding: 10rpx 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			view:nth-child(1) {
				display: flex;
				align-items: center;

				image {
					width: 120rpx;
					height: 120rpx;
				}

				.tit {
					margin-left: 20rpx;
					font-size: 40rpx;
				}
			}

			.about {
				color: #eee;
			}
		}

		.accountInfo {
			margin-top: 20rpx;
			background-color: #fff;

			.balance {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 10rpx;
				border-bottom: 1px solid #eee;

				.myBalance {
					padding: 0 10rpx;
					border-left: 5px solid #FF4040;
				}
			}

			.detail {
				display: flex;
				padding: 30rpx 90rpx;
				justify-content: space-between;

				view {
					text-align: center;
					margin-top: 10rpx;
				}
			}
		}

		.goodsInfo {
			margin-top: 20rpx;
			background-color: #fff;

			.goods {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 10rpx;
				border-bottom: 1px solid #eee;

				.orderMy {
					padding: 0 10rpx;
					border-left: 5px solid #FF4040;
				}
			}

			.detail {
				display: flex;
				padding: 30rpx 0;
				justify-content: space-around;

				view {
					text-align: center;
					margin-top: 10rpx;
				}
			}
		}

		.functions {
			margin-top: 20rpx;
			background-color: #fff;
		}
	}
</style>
